<template>
  <div class="digiboardMain">
    <p>{{ count }}</p>
    <span>{{ name }}</span>
  </div>
</template>

<script setup lang="ts">
  import axios from 'axios'
  import { ref, watch, onMounted } from 'vue'
  import { onBeforeRouteLeave } from 'vue-router'
  const props = defineProps({
    data: {
      type: Object
    }
  })
  const count = ref(0)
  const name = ref('默认描述')
  const initList = (url: any) => {
    axios
      .get(url)
      .then((res: any) => {
        count.value = res.data.data.formCount.count
        name.value = res.data.data.formCount.name
      })
      .catch(() => {})
  }

  const unWatch = watch(
    () => props.data.config.cardUrl,
    () => {
      if (props.data.config.cardUrl !== '') {
        initList(props.data.config.cardUrl)
      } else {
        count.value = 0
        name.value = '默认描述'
      }
    }
  )
  onBeforeRouteLeave(() => {
    unWatch() //销毁监听器
  })
  onMounted(() => {
    initList(props.data.config.cardUrl)
  })
</script>
<style scoped lang="scss">
  .digiboardMain {
    background: #1e8fa0;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    p {
      font-size: 28px;
    }
    span {
      font-size: 16px;
    }
  }
</style>
